<template>
  <div>
    <h1>登录日志</h1>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form :inline="true" :model="loginForm" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
              <el-form-item label="登录账号：">
                <el-input v-model="loginForm.userName"
                          placeholder="请输入用户账号"
                          @keyup.enter.native="search"
                ></el-input>
              </el-form-item>
              </div>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="登录日期：">
                <el-date-picker
                    v-model="loginFormTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchTime">查询</el-button>
              </el-form-item>
            </div></el-col>
          </el-row>
        </el-form>
      </el-col>
    <el-col :span="24"><div class="grid-content bg-purple-dark"></div>
      <el-table
          :data="tableData"
          stripe
          style="width: 100%">
        <el-table-column
            prop="userName"
            label="登录账号"
            >
        </el-table-column>
        <el-table-column
            prop="type"
            label="登录状态"
            >
        </el-table-column>
        <el-table-column
            prop="ipaddr"
            label="IP地址"
            >
        </el-table-column>
        <el-table-column
            prop="loginBrowser"
            label="浏览器">
        </el-table-column>
        <el-table-column
            prop="operatingSystem"
            label="系统">
        </el-table-column>
        <el-table-column
            prop="operation"
            label="操作记录">
        </el-table-column>
        <el-table-column
            prop="loginTime"
            label="操作时间">
        </el-table-column>
      </el-table>
    </el-col>
    </el-row>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size=this.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=this.total>
    </el-pagination>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "LoginInforPage",
  data(){
    return{
      //时间查询
      loginFormTime:[]
      ,
      //显示的数据
      tableData:[],
      //用户名查询
      loginForm:{
        userName:""
      },
      //当前页数
      currentPage: 1,
      //每页多少条
      pageSize: 10,
      //总条数
      total:0,
    }
  },
  created() {

    this.loadData()

  },
  methods:{
    async loadData(){
      if(this.loginFormTime==null){
        this.loginFormTime=[]
      }
      let startTime
      let endTime
      if(this.loginFormTime[0]!=undefined){
       startTime=this.loginFormTime[0];
        endTime=this.loginFormTime[1];
      }else {
        startTime=''
        endTime=''
      }
      let data= await request("loginInfor?userName="+this.loginForm.userName+"&startTime="+startTime+"&endTime="+endTime+"&page="+this.currentPage+"&size="+this.pageSize)
        this.tableData = data.list
        this.total=data.total

    },
    //每页多少条
    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1
      this.loadData()
      console.info("每页："+val+"条")
    },
    //当前页数
    handleCurrentChange(val) {
      this.currentPage=val
      this.loadData()
      console.info("现在是第："+val+"页");
    },
    //查询的方法
    search(){
      this.currentPage=1
      this.loadData()
    },
    //按时间查询的方法
    searchTime(){
      this.currentPage=1
      this.loadData()
    }
  }
}
</script>

<style scoped>

</style>